<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"> </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/jquery.js"></script>
    <script type="text/babel">
        class Mylife extends React.Component {
            /* 初始化数据,state 用,绑定react的方法,
            可以删除,因为继承的时候,默认会写 */
            constructor(props) {
                super(props)
                this.state = {
                    name: '王五',
                    age: 10
                }
            }
            myclick = (params) => {
                // name 从服务器端获取来的了
                let { age } = this.state
                age += 10;
                this.setState({ age })
            }

            render() {
                // 用的es6的解构 const age = this.state.age
                const { age, name } = this.state
                return (
                    <div > 我是主组件--&gt; {age}---{name}
                        <button onClick={this.myclick}>请点击</button>
                        <Mybtn btnprops={age} />
                    </div>

                )
            }
        }
        // 更新阶段的方法,都在子类测试
        class Mybtn extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    name: '赵六',
                }
            }
            // props 发生变化都会执行,state 发生变化检测不到
            componentWillReceiveProps(newprops) {
                console.log('新改变的值', newprops);
                console.log('当前的props', this.props);
            }
            // 可以检测props 和state发生变化,要给限制住
            shouldComponentUpdate(newprops,newstate){
                console.log('可以检测props 和state发生变化');
                return true
            }
             // 可以检测props 和state发生变化,要给限制住
            componentDidUpdate(preprops,prestate){
                console.log('componentDidUpdate-',preprops);
                console.log('componentDidUpdate-',this.props);
                let successfn = (date) => {
                    // name 从服务器端获取来的了
                    let { name } = this.state
                    name = date.uername;
                    this.setState({name})
                    console.log('执行一次,从服务器获取数据,发送数据')
                }
                // 默认是异步方法
                $.ajax({
                    url:'http://127.0.0.1/react',
                    // async:false,
                    data:{name:'zhangsan',age:10},
                    success:successfn,
                    error:function(msg){
                        alert(msg);
                    }
                })
            }

            render() {
                const { name } = this.state
                return (
                    <div>{name}== 我是子组件===&gt;{this.props.btnprops} </div>
                )
            }
        }
        ReactDOM.render(<Mylife />, document.getElementById('app'))

    </script>

</body>

</html>